class Messgebox {
    //构造函数
    constructor (opition) {
        this.setting(opition)
        this.basicTop = 60
    }

    //设置
    setting (opition) {
        this.opition = Object.assign({
            msg: '这是一条消息',
            type: 'normal',
            timer: 3000,
            gap: 10,
        }, opition)
    }

    //显示提示框
    show (opition) {
        this.setting(opition)

        let msg_box = document.createElement('div')
        let msg_tip = document.createElement('div')
        // let msg_icon = document.createElement('img')

        msg_tip.classList.add('msg-tip')
        msg_tip.innerText = this.opition.msg

        // msg_icon.classList.add('msg-icon')
        // msg_icon.src = `https://web.chengqige.com/myTool/messagebox/msg/img/icon-${this.opition.type}.png`

        msg_box.classList.add('msg-box', this.opition.type, 'show')
        msg_box.appendChild(msg_tip)
        // msg_box.appendChild(msg_icon)

        document.body.append(msg_box)

        this.queue = Array.from(document.querySelectorAll('.msg-box.show'))
        this.queueSize = this.queue.length - 1

        msg_box.style.top = this.queueSize * (this.basicTop) + this.opition.gap - this.basicTop + 'px'

        setTimeout(() => {
            this.queue.forEach((item) => {
                this.removeAnimation(item)
            })
            msg_box.classList.remove('show')
            // console.warn(this.queueSize)
            setTimeout(() => {
                msg_box.remove()
            }, 420)
        }, this.opition.timer)

        setTimeout(() => {
            msg_box.style.top = this.queueSize * (this.basicTop) + this.opition.gap +
              'px'
        }, 25)
    }

    //移除动画
    removeAnimation (msg_box) {
        setTimeout(() => {
            msg_box.style.top = parseInt(msg_box.style.top) - this.opition.gap - parseInt(getComputedStyle(msg_box)['height']) + 'px'
        }, 1)
    }
}